 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客首页</title>
    <!-- 引入 Semantic UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <style>
		
		body {
		    background: #f9f9f9;
		}
		.main.container {
		    margin-top: 7em; /* 导航栏的高度 */
		    display: flex;
		    justify-content: space-between;
			width: 80%; /* 主体内容的宽度 */
			    margin-left: auto; /* 主体内容居中 */
			    margin-right: auto;
			}
		}
		.left-content {
		    flex: 3;
		}
		.right-content {
		    flex: 1;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    padding: 2em;
		    background: #fff;
		    border: 1px solid #ddd;
		    border-radius: 5px;
		}
		.personal-avatar {
		    margin-bottom: 1em;
		}
		.personal-avatar img {
		    width: 100px; /* 头像宽度，根据需要调整 */
		    height: 100px; /* 头像高度，根据需要调整 */
		    border-radius: 50%; /* 圆形头像 */
		    object-fit: cover; /* 确保图片覆盖整个区域，不留空白 */
		}
		personal-info {
		            margin-top: 1em; /* 与头像保持一定间距 */
		            text-align: left; /* 文字靠左对齐 */
		        }
					.edit-button {
					           
					            bottom: 10px; /* 距离容器底部10px */
					            right: 10px; /* 距离容器右侧10px */
					        }
		.personal-info h3 {
		    margin-top: 0;
		}
		.statistic {
		    display: flex;
		    justify-content: space-between;
		    padding: 1em;
		    background: #fff;
		    border: 1px solid #ddd;
		    border-radius: 5px;
		}
		.statistic .stat-item {
		    text-align: center;
		}
		.article-list {
		    margin-top: 1em;
		}
		.article-item {
		    margin-bottom: 1em;
		    padding: 1em;
		    background: #fff;
		    border: 1px solid #ddd;
		    border-radius: 5px;
		}
		.article-item h4 {
		    margin-top: 0;
		}
		   
	</style>
</head>
<body>

        <!-- ... 导航栏内容 ... -->
    <!-- 导航栏 -->
    <nav class="ui inverted  attached segment m-padded-tb-mini">
    	<div class="ui container">
    	<div class="ui inverted secondary menu">
    		<h2 class="ui teal header item">管理后台</h2>
    		<a class="item active" href="#home">
    		    <i class="home icon"></i> 博客首页
    		</a>
    		<a class="item" href="文章管理.html">
    		    <i class="write icon"></i> 文章管理
    		</a>
    		<a class="item" href="文章发布.html">
    		    <i class="edit icon"></i> 文章发布
    		</a>
    		<a class="item" href="分类管理.html">
    		    <i class="folder open icon"></i> 分类管理
    		</a>
    		<a class="item" href="标签管理.html">
    		    <i class="tag icon"></i> 标签管理
    		</a>
    		<a class="item" href="用户管理.html">
    		    <i class="settings icon"></i> 用户管理
    		</a>
    		<div class="right menu">
    			<div class="ui dropdown item">
    				<div class="text">
    					<img class="ui avatar image" src="images/屏幕截图 2024-04-28 125007.png">
    					用户名
    				</div>
    				<i class="dropdown icon"></i>
    				<div class="menu">
    					<a href="#" class="item">注销</a>
    					
    				</div>	
    			</div>
    			
    		</div>
    		</div>
    	</div>
    </nav>

   

    <!-- 页面内容 -->
    <div class="main container">
        <div class="left-content">
            <!-- 文章、分类和标签统计 -->
            <div class="statistic">
                <div class="stat-item">
                    <div class="ui statistic">
                        <div class="value">42</div>
                        <div class="label">文章数量</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="ui statistic">
                        <div class="value">21</div>
                        <div class="label">分类数量</div>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="ui statistic">
                        <div class="value">35</div>
                        <div class="label">标签数量</div>
                    </div>
                </div>
            </div>

            <!-- 最新发布的文章列表 -->
            <div class="article-list">
                <h2 class="ui header">最新文章</h2>
                <div class="article-item">
                    <h4>文章标题1</h4>
                    <p>文章摘要或简介...</p>
                </div>
                <!-- 更多文章列表项 -->
            </div>
        </div>

        <div class="right-content">
            <!-- 个人信息 -->
			<div class="personal-avatar">
			                <img src="images/屏幕截图 2024-04-28 125007.png" alt="用户头像">
			            </div>
            <div class="personal-info">
                <h3 class="ui header">个人信息</h3>
                <p>用户名: <strong>张三</strong></p>
                <p>邮箱: <strong>zhangsan@example.com</strong></p>
                <p>注册时间: <strong>2024-01-01</strong></p>
                <p>个人简介: <strong>这是一个个人简介的段落。</strong></p>
            </div>
			 <!-- 编辑按钮 -->
			            <button class="ui button primary edit-button">
			                <i class="edit icon"></i>
			                编辑
			            </button>
        </div>
    </div>

    <!-- 引入 Semantic UI 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
   <script>
       // 这里可以初始化一些JavaScript代码，如果需要的话
     $('.ui.dropdown').dropdown();
   </script>

</body>
</html>